<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初识Vue</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>插值语法 Hello,{{name}}</h1>
			<hr />
			<h1>指令语法</h1>
			<!-- 单向数据绑定 -->
			<a v-bind:href="url" :x="hello">点我跳转<a>
			<!-- 双向数据绑定,仅使用于表单相关的标签属性-->
			<input v-model:value="name"/>
		</div>
		<script>
			// 阻止vue在启动时生成生成提示
			Vue.config.productionTip = false
			// 创建Vue实例
			const vm = new Vue({
				el:'#root', // el用于指定当前Vue实例为哪个容器服务
				data:{ // data中用于存储数据,数据供el所制定的容器去使用
					name:'杭州市',
					url:'http://121.41.50.74/',
					hello:'物联网运营平台'
				}
				// 函数一定不能使用=>箭头式,否则this会为Window
				// data:function() {
				// 	console.log(this);
				// 	return {
				// 		name : 'wwwwww',
				// 		url:'ddddd',
				// 		hello:'ddd'
				// 	};
				// }
			});
			// MVVM 模型
			// M指的是Model 表示的是data及表达式
			// V指的是View 表示的是页面DOM
			// VM 指的是Vue 它用于将Model中的数据和View中的表达式进行关联
			console.log(vm);
		</script>
	</body>
</html>